<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画&过渡</title>
    <style>
        /* 进入开始 */
        .slide-enter {
            transform: translateY(100px);
            opacity: 0;
        }

        /* 进入完成 */
        .slide-enter-to {
            /* transform: translateY(0);
            opacity: 1; */
        }

        /* 进入的过渡态 */
        .slide-enter-active {
            transition: 2s;
        }

        /* 离开开始 */
        .slide-leave {
            /* opacity: 1; */
        }

        /* 离开完成 */
        .slide-leave-to {
            opacity: 0;
            transform: translateX(200px);
        }

        /* 离开的过渡态 */
        .slide-leave-active {
            transition: 2s;
        }

        .zoomin-enter,
        .zoomin-leave-to {
            opacity: 0;
            transform: scale(3);
        }
        .zoomin-enter-active,
        .zoomin-leave-active {
            transition: 3s;
        }
        .container{
            width: 600px;
            height: 300px;
            background-color: rgb(236, 245, 226);
            margin: 50px auto 0;
            text-align: center;
            overflow: hidden;
        }
        /* 进入的过程 */
        .bounce-enter-active{
            animation: bounce-in-out 1s 1 ;
        }
        /* 离开的过程 */
        .bounce-leave-active{
            animation: bounce-in-out 1s 1 reverse;
        }
        @keyframes bounce-in-out {
            from{
                opacity: 0;
                transform: scale(0) rotate(360deg);
            }
            75%{
                opacity: 0.5;
                transform: scale(1.5) rotate(90deg); 
            }
            to{
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }
        .abc:hover{
            transform: scale(2);
        }
        .abc{
            transition: 2s;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click='toggle'>过渡</button>
        </div>
        <transition name='slide'>
            <h2 v-if="show">看我变变变</h2>
        </transition>
        <hr>
        <div class="container">
            <div>
                <button @click='show1=!show1'>过渡</button>
            </div>
            <transition name='zoomin'>
                <h2 v-if="show1">看我变变变</h2>
            </transition>
        </div>
        <hr>
        <my-transition name="bounce"></my-transition>
    </div>

    <div class="container">
        <h2 class="abc">鼠标指导我</h2>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        Vue.component("my-transition",{
            data(){
                return {
                    show:true
                }
            },
            props:['name'],
            template:`
            <div class="container">
                <div>
                    <button @click='show=!show'>过渡</button>
                </div>
                <transition :name='name'>
                    <h2 v-if="show">看我变变变</h2>
                </transition>
            </div>
            `
        })
        new Vue({
            data: {
                show: true,
                show1: true
            },
            methods: {
                toggle() {
                    this.show = !this.show
                }
            }
        }).$mount('#app')

        const h2 = document.querySelector('.container .abc')
        h2.addEventListener("transitionstart",function(){
            console.log('h2开始过渡了')
        })
        h2.addEventListener("transitionend",function(){
            console.log('h2过渡结束了')
        })
    </script>
    <!-- 
    1.找到要过渡的组件或者元素
    2.用transition组件包裹，并设置过渡名称
    3.根据过渡的类名设置对应的css 
-->
</body>

</html>